<%
    var obj={pageTitle:"欢迎登陆学生信息管理系统"}
%>
{{include "../layout_header.html" obj}}
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<style type="text/css">
    .logoDiv {
        padding: 10px 0;
        width: 1200px;
        margin: auto;
    }

    .bgLogin {
        max-width: 100%;
        height: 550px;
        background-image: url("/public/img/login.png");
        background-size: 100% 100%;
    }

    .innerBgLogin {
        width: 1200px;
        height: 100%;
        margin: auto;
    }

    @media only screen and (max-width:1200px) {

        .logoDiv,
        .innerBgLogin {
            width: 100%;
        }
    }

    .loginBox {
        width: 440px;
        background-color: white;
        float: right;
        margin-top: 20px;
        border-radius: 10px;
        height: 450px;
    }

    .loginType {
        height: 75px;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        border-bottom: 1px solid lightgray;
        box-sizing: border-box;
    }

    .loginType>li {
        height: 100%;
        float: left;
        width: 50%;
        text-align: center;
        line-height: 75px;
        font-size: 18px;
        cursor: pointer;
    }

    .loginType>li.active {
        color: #37a6f4;
        border-bottom: 2px solid #37a6f4;
    }

    .loginContent {
        height: 375px;
    }

    .loginByUser {
        box-sizing: border-box;
        padding: 20px;
    }

    .loginByQRCode {
        width: 100%;
        height: 100%;
        display: none;
    }
</style>
<div class=" logoDiv">
    <img src="/public/img/logo.png" alt="" style="height: 45px;">
    <span class="h4" style="margin-left: 20px;">学生信息管理系统</span>
</div>
<div class="bgLogin">
    <div class="innerBgLogin clearfix">
        <div class="loginBox">
            <ul class="loginType clearfix">
                <li data-target="#loginByQRCode">扫码登陆</li>
                <li class="active" data-target="#loginByUser">账号登陆</li>
            </ul>
            <div class="loginContent">
                <!-- 账号登陆 -->
                <div class="loginByUser" id="loginByUser">
                    <form id="loginForm" action="/AdminInfo/checkLogin" method="POST">
                        <div class=" form-group">
                            <div class=" input-group">
                                <div class=" input-group-addon">
                                    账号
                                </div>
                                <input data-rule-required="true" name="userName" type="text" class=" form-control input-lg" placeholder="请输入账号">
                            </div>
                            <div class=" col-sm-12"></div>

                        </div>
                        <div class=" form-group">
                            <div class=" input-group">
                                <div class=" input-group-addon">
                                    密码
                                </div>
                                <input data-rule-required="true" name="userPwd" type="password" class=" form-control input-lg"
                                    placeholder="请输入密码">
                            </div>
                            <div class=" col-sm-12"></div>
                        </div>
                        <div class=" form-group">
                            <div class=" input-group">
                                <div class=" input-group-addon">
                                    角色
                                </div>
                                <select class=" form-control input-lg">
                                    <option value="">管理员</option>
                                    <option value="">老师</option>
                                    <option value="">学生</option>
                                </select>
                            </div>
                        </div>
                        <div class=" form-group">
                            <div class=" row">
                                <div class=" col-xs-8">
                                    <input  type="text" id="VCodeTxt" class=" form-control input-lg"
                                        placeholder="请输入验证码">
                                </div>
                                <div class=" col-xs-4">
                                    <img src="/main/getVCode?" id="VCodeImg" style="width: 100%;cursor: pointer;">
                                </div>
                            </div>
                        </div>
                        <div class=" form-group">
                            <button type="submit" id="btnLogin" class=" btn btn-primary btn-block btn-lg">登陆</button>
                        </div>
                        <div class=" form-group text-center">
                            <svg id="loginByQQ" class="icon" style="font-size: 28px;cursor:pointer" title="通过QQ登陆">
                                <use xlink:href="#iconQQ"></use>
                            </svg>
                        </div>
                    </form>
                </div>
                <!-- 扫码登陆 -->
                <div class="loginByQRCode" id="loginByQRCode">

                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin-top: 10px;" class="text-muted text-center">&copy;Softeem·杨标 版权所有</div>


<script>
    /*
     * 解释一下goto参数，参考以下例子：
     * 
     */
    var url = encodeURIComponent('http://jx.softeem.xin/main/fromDing');
    var goto = encodeURIComponent(
        'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoaomi3uczubhsw1hmr&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' +
        url)
    var obj = DDLogin({
        id: "loginByQRCode", //这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
        goto: goto, //请参考注释里的方式
        style: "border:none;background-color:#FFFFFF;",
        width: "440",
        height: "375"
    });

    var handleMessage = function (event) {
        var origin = event.origin;
        console.log("origin", event.origin);
        if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
            var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
            console.log("loginTmpCode", loginTmpCode);   //登陆的临时码
            location.href="https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoaomi3uczubhsw1hmr&response_type=code&scope=snsapi_login&state=STATE&redirect_uri="+url+"&loginTmpCode="+loginTmpCode
        }
    };
    if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('message', handleMessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
        window.attachEvent('onmessage', handleMessage);
    }
    
</script>

<script type="text/javascript">
    $(function () {
        $("#loginForm").validate({
            errorClass:"text-danger",
            errorPlacement:function(error,element){
                error.appendTo(element.parent().next());
            }
        });


        $(".loginType>li").click(function () {
            var target = $(this).attr("data-target");
            $(this).addClass("active").siblings().removeClass("active");
            $(target).show().siblings().hide();
        });
        //点击刷新验证码
        $("#VCodeImg").click(function () {
            var src = $(this).attr("src");
            // 在请求地址的后面加上一个随机数，这样每次请求的SRC都不一样，这样img就会重新发起请求
            // 重新发起请求就相当于重新获取验证码
            $(this).attr("src", src.replace(/\?.*/g, "?" + Math.random()));
        });

        //点击以后判断验证码是否正确
        $("#btnLogin").click(function () {
            //发起Ajax的请求，把验证码发送到服务器去验证
            var VCodeFlag = false;
            $.ajax({
                //取消异步 ，变成同步
                async: false,
                method: "get",
                url: "/AdminInfo/checkVCode?VCode=" + $("#VCodeTxt").val(),
                success: function (data) {
                    if (data == true) {
                        VCodeFlag = true;
                    } else {
                        layer.alert("验证码不正确，重新输入", function (index) {
                            //index代表alert弹出层的编号，要通过这个编号去关闭弹出窗
                            layer.close(index);
                            //调用上面点击图片验证码的方法重新生成验证码
                            $("#VCodeImg").click();
                            $("#VCodeTxt").val("");
                        });
                    }
                }
            });
            return VCodeFlag; //返回true/false确定表单是否要提交
        });

        //通过QQ登陆
        $("#loginByQQ").click(function(){
            var redirect_uri="http://jx.softeem.xin/Main/fromQQ";
            var url="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101531053&redirect_uri="+encodeURIComponent(redirect_uri)+"&state=biaogege";
            window.open(url);
        });
    })
</script>
{{include "../layout_footer.html"}}